<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>_自定义模版示例</title>
		<script src="../js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Underscore-1.8.3min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/backbone.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body{font-size:13px}
			ul{list-style-type:none;padding:0px;margin:0px;width:360px}
			li:first-child span{
				float:left;border-bottom:1px solid #ccc;background:#eee;font-weight:bold;
			}
			ul li span{width:80px;text-align:left;float:left;padding:0px 5px;border-bottom:dashed 1px #ccc;line-height:28px;
			}
		</style>
	</head>
	<body>
		<script type="text/template" id="tpl">
			<%
			var intSumScore=0,intAveScore=0;  
			for(var i=0;i<list.length;i++){
				var item=list[i];
	        %> 
					<li>
						<span><%=item.stuid%></span>
						<span><%=item.name%></span>
						<span><%=item.sex%></span>
						<span><%=item.score%></span>
					</li>
					<%
					 	intSumScore+=parseInt(item.score)
					 	intAveScore=intSumScore/list.length;
						}
					 %>
					 <li>
							<span>平均分:</span>
							<span><%=intAveScore%></span>
							<span>总分:</span>
							<span><%=intSumScore%></span>
					 </li>
		</script>
		<ul id="element">
			<li>
				<span>学号</span>
				<span>姓名</span>
				<span>性别</span>
				<span>总分</span>
			</li>
		</ul>
		<script src="js/data.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		var ele = $('#element'),
			tpl = $('#tpl').html();  
			var _html = _.template(tpl,data); 
			ele.append(_html);
		</script>
	</body>

</html>